<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <link rel="stylesheet" href="../css/public.css" media="all" />
</head>
<body>
<div class="layui-carousel stutas"  id="ID-carousel-demo-image" >
    <div carousel-item>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg" style="width: 100% ; height: 100%" ></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg" style="width: 100% ; height: 100%" ></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg" style="width: 100% ; height: 100%" ></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg" style="width: 100% ; height: 100%" ></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg" style="width: 100% ; height: 100%" ></div>
    </div>
    <div>
        <button id="yao"> 支付药单</button>
        <table
                class="layui-hide"
                id="currentTableId"
                lay-filter="currentTableFilter"
        ></table>
    </div>
</div>

<div class="layuimini-container" id="TWO">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">管理账号</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入管理账号"  value="admin" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">性别</label>
                <div class="layui-input-block">
                    <input type="text" name="sex" lay-verify="required" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age"  value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" class="layui-textarea" >
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="num" class="layui-textarea" >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    layui.use(['table'], function(){
        var table = layui.table;
        var form = layui.form;

        // 创建渲染实例
        table.render({
            elem: '#ID-table-demo-css',
            url:'/static/json/2/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
            page: true,
            height: 'full-35',
            lineStyle: 'height: 151px;', // 定义表格的多行样式
            css: [ // 直接给当前表格主容器重置 css 样式
                '.layui-table-page{text-align: center;}' // 让分页栏居中
            ].join(''),
            className: 'layui-table-testcss', // 用于给表格主容器追加 css 类名
            cols: [[
                {field:'username', width:160, title: '用户', templet: '#ID-table-demo-css-user'},
                // 设置单元格样式
                {field:'sign', minWidth:100, title: '签名', style:'color: #000;'},
                {width:160, title: '操作', templet: '#ID-table-demo-css-tool'}
            ]]
        });
        // 表单提交
        form.on('submit(demo-css-submit)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });

    });
</script>
<script>
    layui.use(function(){
        var carousel = layui.carousel;
        // 渲染 - 图片轮播
        carousel.render({
            elem: '#ID-carousel-demo-image',
            width: '100% ',
            height: '360px',
            interval: 2000
        });

        $("#yao").on("click",function ()
        {
            const http = localStorage.getItem("http");
            layer.open({
                type: 1, // page 层类型
                area: ['500px', '300px'],
                title: '药单信息',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                closeBtn:0,
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: '<div style="padding: 32px;">支付成功</div>'
            });
            $.ajax({
                method: "DELETE",
                url:http + `/Medicines/remove`,
                success:function (res){
                    window.setTimeout(function (){
                        layer.closeAll()
                    },1000)
                    table.reload('currentTableId', {
                        data: ''
                    })
                }
            })
        })
    });
</script>
<script>
    layui.use(['form','miniTab'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniTab = layui.miniTab;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            const field = Object.values(data.field)
            console.log(field)
            localStorage.setItem("field",field)

            $("#TWO").addClass("stutas")
            if ( $("#ID-carousel-demo-image").hasClass("stutas")){
                $("#ID-carousel-demo-image").removeClass("stutas")
            }else{

            }
        });

    });
</script>
<style>
    .stutas{
        display: none;
    }
    .Nostutas{
        display: block;
    }
    .layui-carousel{
        margin: 0 auto;
    }
         /* 自定义样式  */
     .layui-table-testcss .layui-table-header,
     .layui-table-testcss thead tr{background-color: #F8FCF9; color: #16BAAA}
    .layui-form-testcss > div{margin-bottom: 6px;}
</style>
<style>
    table {
        margin: 0 auto;
        border-collapse: collapse;
        border: 2px solid rgb(140 140 140);
        font-family: sans-serif;
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    caption {
        caption-side: bottom;
        padding: 10px;
        font-weight: bold;
    }

    thead,
    tfoot {
        background-color: rgb(228 240 245);
    }

    th,
    td {
        border: 1px solid rgb(160 160 160);
        padding: 8px 10px;
    }

    td:last-of-type {
        text-align: center;
    }

</style>
<script>
    window.onload=function (){
        const http = localStorage.getItem("http");
        $.ajax({
            method: "GET",
            url: http + `/Medicines/list`,
            success:function (res){
                var shuju = res.data;
                layui.use(["form", "table"], function () {
                    var $ = layui.jquery,
                        form = layui.form,
                        table = layui.table;
                    table.render({
                        elem: "#currentTableId",
                        id: "currentTableId",
                        data: shuju,
                        toolbar: "#toolbarDemo",
                        defaultToolbar: [
                            "filter",
                            "exports",
                            "print",
                            {
                                title: "提示",
                                layEvent: "LAYTABLE_TIPS",
                                icon: "layui-icon-tips",
                            },
                        ],
                        cols: [
                            [
                                { type: "checkbox", width: 50 },
                                { field: "medicineId", width: 80, title: "ID", sort: true },
                                { field: "medicineName", width: 80, title: "药品名称" },
                                { field: "medicinePrice", width: 80, title: "药品价格", sort: true },
                                { field: "medicineQuantity", width: 120, title: "药品库存" },
                                { field: "medicineNum", width: 120, title: "药品数量" },
                            ],
                        ],
                        limits: [10, 15, 20, 25, 50, 100],
                        page: true,
                        skin: "line",
                    })
                })
            }
        })
    }
</script>
</body>
</html>
